<template>
  <view class="com-section address-bg" @click="nav">
    <view class="com-flex">
      <u-icon name="map" size="18" />
      <view class="com-flex-1 com-ml-sm" v-if="info && info.name">
        <view class="">
          <text class="com-text-md">{{ info.name }}</text>
          <text class="">{{ info.phone }}</text>
        </view>
        <view class="com-text-2">
          {{ info.province }} {{ info.city }} {{ info.district || info.region }}
          {{ info.detailAddress }}
        </view>
      </view>
      <view class="com-flex-1 com-spacing" v-else>请选择收货地址</view>
      <view :class="{ 'com-arrow': isEdit }" />
    </view>
  </view>
</template>

<script>
export default {
  name: 'concact-card',
  props: {
    info: {
      type: Object,
      default() {
        return {}
      },
    },
    isEdit: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {}
  },
  components: {},
  watch: {},
  mounted() {},
  methods: {
    nav() {
      if (this.isEdit) {
        // 触发父组件的地址选择方法
        this.$emit('select-address')
      }
    },
  },
}
</script>

<style scoped lang="scss">
.address-bg::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: repeating-linear-gradient(
    135deg,
    #f67a6a 0,
    #f67a6a 20%,
    transparent 0,
    transparent 25%,
    #81a9f2 0,
    #81a9f2 45%,
    transparent 0,
    transparent 50%
  );
  background: repeating-linear-gradient(
    -45deg,
    #f67a6a 0,
    #f67a6a 20%,
    transparent 0,
    transparent 25%,
    #81a9f2 0,
    #81a9f2 45%,
    transparent 0,
    transparent 50%
  );
  background-size: 100px;
}
</style>
